<template>
  <el-skeleton
    animated
    :throttle="500"
    :loading="loading"
    :rows="3"
  >
    <template #template>
      <el-skeleton-item style="width: 500px;" variant="circle"/>
      <el-skeleton-item variant="text"/>
      <el-skeleton-item variant="h3" style="width: 50%" />
          <div>
            <el-skeleton-item variant="text" style="margin-right: 16px" />
            <el-skeleton-item variant="text" style="width: 30%" />
          </div>
    </template>
    <template #default>
      <label class="postTalk">
        <el-button @click="to_posttalk" round type="warning"> 发布说说</el-button>
        <svg style="font-size: 28px" class="icon" aria-hidden="true">
            <use xlink:href="#icon-tianjia"></use>
        </svg>
      </label>
      <el-card v-for="(talk, index) in talkList" :key="index">
        <template #header>
          <div class="userInfo">
            <el-row>
              <el-col :span="2">
                <el-avatar
                  :src="talk.member.avatarUrl"
                  :size="60"
                  shape="circle"
                ></el-avatar>
              </el-col>
              
              <el-col :span="6">
                <span>{{ talk.member.nickName }}</span>&nbsp;&nbsp;&nbsp;
                <el-tag>{{ talk.member.schoolName }}</el-tag>
                <el-tag>{{ talk.member.majorName }}</el-tag>
                <el-tag>{{ talk.member.majorYear }}</el-tag>
                <el-tag>{{ talk.member.gender }}</el-tag>
                <el-col :span="6">
                  <el-tag v-for="(roleTag,index) in talk.member.roleTagList" :key="index">
                    {{ roleTag }}
                  </el-tag>
                  
                </el-col>
                <el-col :span="6">
                  <el-tag  v-for="(tag,index) in talk.tagList" :key="index">
                    {{ tag.name }}
                  </el-tag>
                </el-col>
                <br />
                <span>{{ talk.createdTime }}</span>
              </el-col>
            </el-row>
          </div>
          <br />
          <!-- 文本内容 -->
          <el-text class="content">
            {{ talk.content }}
          </el-text>
          <br />
          <!-- 图片九宫格 -->
          <div class="imageBox">
            <el-image
              :style="{
                width:
                  talk.albumList.length == 3 || talk.albumList.length > 4
                    ? '33%'
                    : '49.5%',
              }"
              fit="contain"
              :src="item"
              v-for="(item, index) in talk.albumList.slice(0,9)"
              :key="index"
            ></el-image>
            <div v-if="talk.albumList.length > 9" class="masking" @click="toDetail(talk)">
              <span>+{{ talk.albumList.length - 9 }}</span>
            </div>
          </div>
          <div class="bottom">
              
              <!-- 点赞图标 -->
              <div class="likeIcon" @click="like_click(talk.id)">
                <svg
                v-if="!ifLike(talkList[index].id)"
                style="font-size: 28px"
                class="icon"
                aria-hidden="true"
                >
                <use xlink:href="#icon-like"></use>
                </svg>
                <svg v-else style="font-size: 28px" class="icon" aria-hidden="true">
                  <use xlink:href="#icon-like1"></use>
                </svg>
                
              </div>
            <!-- 详情 -->
            <el-link style="font-size:16px" type="primary" :underline="false" @click="toDetail(talk)">详情</el-link>
          </div>
        </template>
        <template #default>
          <!-- 点赞用户 -->
          <div class="like">
            <span v-show="talk.likeNum > 0"
              >共{{ talk.likeNum }}人觉得很赞！</span
            >
          </div>
    
          <!-- 热评 -->
          <div class="hot_comment" v-if="talk.hostComment != null">
            <el-text style="color:red;font-size:18px" size="large">{{ talk.hostComment.content }}</el-text>
            <svg style="font-size: 28px" class="icon" aria-hidden="true">
              <use xlink:href="#icon-hot">说说</use>
            </svg>
          </div>
    
         
        </template>
      </el-card>
    </template>
  </el-skeleton>
</template>

<script setup>
import { computed, nextTick, onMounted, onUpdated, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { getDynamicTagList,getDynamicList, likeClick } from "@/api/dynamic";
import { indexOf } from "lodash";

const store = useStore(); //talk模块
const router = useRouter();

//动态列表
let talkList = ref([]);
//用户点赞列表Id
let likeList = ref(['']);
likeList.value = store.getters.getLikeList;
console.log('点赞列表',likeList);
// 初次跳转获取说说列表
onMounted(async () => {
  talkList.value = await getDynamicList();
  console.log('获取到的说说列表',talkList);
})

//传入动态 Id 判断当前用户是否点赞
function ifLike(dynamicId) {
  return(likeList.value.includes(dynamicId));
}

//跳转到发布说说页面事件
function to_posttalk(){
  router.push({
    path: '/posttalk'
  });
}

//点赞事件
async function like_click(id) {
  await likeClick(id);
  if(!likeList.value.includes(id)){
    likeList.value.push(id);
  }else {
    likeList.value.splice(likeList.value.indexOf(id),1);
  }
 
  store.dispatch('likeList',likeList);
}
//数据持久化
// const talkList = computed({
//   get: () => {
//     return store.getters.getTalkList;
//   },
//   set: () => {
//     store.dispatch("like_click", index);
//   },
// });
// console.log(store)

// let talkList = reactive([
//   {
// 					id: 1,
// 					content: "测试",
// 					tagList: [{
// 						tagId: 1,
// 						name: "测试",
// 						icon: "test"
// 					}],
// 					member: {
// 						nickName: "动态发布者",
// 						avatarUrl: "http://xiaoyuanlive-lkkings.oss-cn-hongkong.aliyuncs.com/dynamic/ecb3f34b0d78a37c8d43d323265b1752.jpeg",
// 						schoolName: "九江学院",
// 						majorName: "软件工程",
// 						majorYear: "2020",
// 						gender: "男",
// 						roleTagList: [
// 							"test1", "test2", "test3"
// 						]
// 					},
// 					hostComment: {
// 						id: "1",
// 						nickName: "评论会员",
// 						avatarUrl: "",
// 						memberId: 2,
// 						content: "好呀",
// 						createdTime: "2022-11-01",
// 						replayNum: 10000,
// 						likeNum: 10000
// 					},
// 					albumList: [
// 						"http://xiaoyuanlive-lkkings.oss-cn-hongkong.aliyuncs.com/dynamic/ecb3f34b0d78a37c8d43d323265b1752.jpeg",
// 						"http://xiaoyuanlive-lkkings.oss-cn-hongkong.aliyuncs.com/dynamic/ecb3f34b0d78a37c8d43d323265b1752.jpeg",
// 						"http://xiaoyuanlive-lkkings.oss-cn-hongkong.aliyuncs.com/dynamic/ecb3f34b0d78a37c8d43d323265b1752.jpeg",
// 						"http://xiaoyuanlive-lkkings.oss-cn-hongkong.aliyuncs.com/dynamic/ecb3f34b0d78a37c8d43d323265b1752.jpeg"
// 					],
// 					likeNum: 1000,
// 					commentNum: 10000,
// 					createTime: "2022-11-01",
// 				}
//   ]);

  

const loading = computed({
  get: () => {
    console.log(store.getters.getLoading)
    return store.getters.getLoading;
  },
  set: () => {
    console.log('loading set')
  }
})


//跳转至详情页面
function toDetail(talk) {
  console.log("点击的talk",talk);
  console.log("点击的talk名字",talk.member.nickName);
  router.push({
    path: '/detail',
    state:{ //不会显示在地址栏，也不会因页面刷新丢失
      // index
      talk: JSON.stringify(talk),
    }
  })
}
</script>

<style scoped>
/* 发布说说 */
.postTalk {
  position: fixed;
  z-index: 10;
  right: 50px;
  display: flex;
  flex-direction: row;
  
}
/* 文本内容 */
.content {
  color: #000;
  font-size: 18px;
}

/* 热评 */
.hot_comment {
  height: 30px;
  width: 400px;
  font-weight: 500;
  border: orange solid 2px;
  border-radius: 10px;
  line-height: 30px;
  padding: 0 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

/* 点赞图标 */
.likeIcon {
  height: 30px;
  width: 30px;
  line-height: 30px;
}

/* 图片九宫格 */
.imageBox {
  position: relative;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
}

/* 图片蒙版 */
.masking {
  position: absolute;
  width: 33%;
  height: 33.33%;
  background-color: darkgray;
  right: 1%;
  bottom: 0;
  opacity: 0.7;
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
}
.masking span {
  margin: 0 auto;
  color: #fff;
  font-weight: lighter;
  font-size: 100px;
  text-align: center;
 
}

.masking span:hover {
  font-size: 120px;
}

/* 点赞和详情 */
.bottom {
  display: flex;
  flex-direction: row-reverse;
}
</style>
